<template>
	<view class="LoopPage">
		<block>
			<image :src="imageUrl + LoopDetailData[0].loop_top_img" mode="widthFix"></image>
		</block>
		<view class="content-section">
			<view class="loop-content">{{LoopDetailData[0]?.loop_content}}</view>
			<view class="scroll-hint">
				<uni-icons type="down" size="30" color="#fff" :style="{ opacity: showArrow ? 1 : 0 }"></uni-icons>
			</view>
		</view>
		<view class="ProductCard" :style="{ opacity: cardOpacity }">
			<LoopProductCardVue :loopShopData="LoopDetailData" style="width: 100%;"></LoopProductCardVue>
		</view>
		<view class="Loop-info-img">
			<!-- 直接在模板中使用 .split() 方法 -->
			<view v-for="(item, index) in LoopDetailData[0]?.loop_bottom_img?.split(',')" :key="index">
				<image lazy-load="true" :src="imageUrl + item" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template> 

<script setup>
	import LoopProductCardVue from '@/components/LoopProductCard.vue';
	import { ref, onMounted } from 'vue';
	import { onLoad, onPageScroll } from '@dcloudio/uni-app'
	import { getLoopDetail } from '@/config/API/home.js'
	import { imageUrl } from '@/config/request/request.js'

	const LoopDetailData = ref([]);
	const cardOpacity = ref(0);
	const showArrow = ref(true);

	onLoad(async (options) => {
		console.log('接收的商环线id', options.id);
		try {
			const LoopDetailRes = await getLoopDetail(options.id);
			LoopDetailData.value = LoopDetailRes.data;
			console.log('环线详情数据', LoopDetailData.value);
		} catch (error) {
			console.error('获取环线详情数据出错：', error);
		}
	});

	// 使用onPageScroll替代window scroll事件
	onPageScroll(({scrollTop}) => {
		const scrollThreshold = 100;
		const maxScroll = 300;

		if (scrollTop > scrollThreshold) {
			const opacity = Math.min((scrollTop - scrollThreshold) / (maxScroll - scrollThreshold), 1);
			cardOpacity.value = opacity;
			if (opacity > 0.3) {
				showArrow.value = false;
			}
		} else {
			cardOpacity.value = 0;
			showArrow.value = true;
		}
	});
</script>

<style lang="scss" scoped>
	.LoopPage{
		width: 100%;
		min-height: 100vh;
		background-color: #000e00;
		image{
			width: 100%;
			height: 80vh;
		}
		.content-section {
			padding: 40rpx;
			position: relative;
		}
		.loop-content {
			color: #fff;
			font-size: 28rpx;
			line-height: 1.6;
			margin-bottom: 60rpx;
			text-align: justify;
		}
		.scroll-hint {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			animation: bounce 1.5s infinite;
		}
		@keyframes bounce {
			0%, 100% {
				transform: translateX(-50%) translateY(0);
			}
			50% {
				transform: translateX(-50%) translateY(10px);
			}
		}
		.ProductCard{
			width: 100%;
			padding: 0 25rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			transition: opacity 0.3s ease;
		}
		.Loop-info-img {
			width: 100%;
			overflow: hidden;
			margin: 0;
			padding: 0;
			view {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 0;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
